<template>
  <div>
    <div class="top-header">
      <div class="header-title" >
        <span class="header-logo">
          <img :src="logo" alt="">
          <span @click="goHomePage">营销数字化运营平台</span>
        </span>
        <!-- <span v-if='$store.state.isMarket' class="header-title-name">567890</span> -->
        <div class="header-menus">
          <div v-if='$store.state.isMarket' class="markStyle">
            <span  style="color:#fff">选择市场</span>
            <el-select
                  @change="slectMarket();getmarkData()"
                  v-model="marketId"
                  placeholder="选择市场">
                  <el-option
                    v-for="item in marketData"
                    :key="item.id"
                    :label="item.marketName"
                    :value="item.id"
                  >
                  </el-option>
            </el-select>
          </div>
          <el-popover
            trigger="hover"
            placement="bottom"
            width="160"
            class="header-user-menu">
            <p>{{phone}}</p>
            <div style="text-align: center; margin: 0">
              <el-button type="primary" size="mini" @click="logout()">登出</el-button>
            </div>
            <div slot="reference">
              <div class="header-user-tip">
                <span>{{name}}</span>
                <i class="el-icon-arrow-down el-icon--right" style="margin: 0px; color: white; float: right"></i>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
      <div class="main-content">
        <router-view/>
      </div>
    </div>
  </div>
</template>
<script>
//import store from '../store/index.js'
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      allMarketDate: [],
      marketData: [],
      cateValue: "",
      cateName: "",
      data1: [],
      marketId:null,
      logo: require('../images/login/logo.png')
    };
  },
  mounted() {
    this.marketId = Number(this.$store.state.id)
    this.getMarket()
    this.obtainRenderOrganization() // 获取组织信息
  },
  computed:{
    marketIds(){
      return Number(this.$store.state.id)
    },
    name() {
      return this.$store.state.user.userName
    },
    phone() {
      return this.$store.state.user.phone
    }
  },
  watch:{
    marketIds(e){
    this.marketId= Number(e)
    }
  },
  methods: {
    ...mapActions(["obtainRenderOrganization"]),
    getMarket() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getMarketName",
          query: {
            creator: this.$store.state.user.id
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            console.log(res.data.data);
            let data = res.data.data;
            this.marketData = data;
          }
        })
        .catch(error => {});
    },
    slectMarket() {
      // console.log("-------------------------------------");
      // let allMarketDate = this.$store.state.marketData;
      // console.log(this.$store.state.marketData);

      // for (var i in allMarketDate) {
      //   if (id === allMarketDate[i].market.id) {
      //     this.$store.commit("setMarket", allMarketDate[i]);
      //   }
      // }
      let id = this.marketId
      console.log(id);

      console.log("-------------------------------------");
      this.marketData.map((item, index) => {
        if (parseInt(id) == parseInt(item.id)) {
          console.log(item);
          this.cateName = item.marketName;

        }
      });
      this.obtinMarket(id, (data) => {
         this.$store.commit("setMarket", data);
         this.$store.commit("setMarketName", this.cateName);
         this.$store.commit("setId", id);

      });



    },
    //查询市场关联竞品-品牌接口
    getmarkData() {
      let id = this.marketId
      console.log(id);
      this.erMarkId = id;
      this.$http
        .post(this.GLOBAL.host, {
          method: "getMarketProduct",
          query: {
            marketId: id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            let arr = [];
            for (let i in res.data.data) {
              arr.push({
                brand: res.data.data[i].brand,
                code: res.data.data[i].productCode
              });
            }
            console.log(arr);
            this.$store.commit("setBrandArr", arr);
          }
        })
        .catch(error => {});
    },
    obtinMarket(id, callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOneMarketTrends",
          query: {
            id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
           // this.data1 = res.data.data;

            let obj={}
            obj.market=res.data.data

            callback(obj);
          }
        })
        .catch(error => {});
    },
    goHomePage() {
      this.$router.push({path: '/index'})
    },
    logout() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "User_LogOut",
        })
        .then(() => {
            sessionStorage.removeItem("tokenName");
            sessionStorage.removeItem("userData");
            this.$store.commit('clearUserData')
            this.$router.push({path: '/login'});
        })
    }
  }
};
</script>
<style lang="less">
.markStyle {
  float: right;
  .el-input {
    background: "#2c333f" !important;
    .el-input__inner {
      background: "#2c333f" !important;
    }
  }
}
.header-menus {
  float: right;
  display: flex;
  align-items: center;
  height: 50px;
}
.header-user-tip {
  display: block;
  min-width: 120px;
  margin: 0 20px;
  color: white;
  text-align: center;
}
.header-title {
  background-color: #0f1920;
}
.header-logo {
  display: inline-block;
  height: 51px;
  padding: 10px 15px;
  vertical-align: middle;
  > img {
    height: 30px;
    vertical-align: middle;
  }
  > span {
    color: white;
    font-size: 20px;
    line-height: 30px;
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
  }
}
</style>
